<!-- 规则信息表单 -->
<template>
  <div>
    <el-form
      ref="ruleFormRef"
      :model="ruleForm"
      :rules="rules"
      label-width="120px"
      class="demo-ruleForm"
      status-icon
    >
      <el-form-item label="选择业务线" prop="type">
        <el-radio-group v-model="ruleForm.type">
          <el-radio label="短训" name="type" />
          <el-radio label="博学谷" name="type" />
        </el-radio-group>
      </el-form-item>
      <el-form-item label="业务编码" prop="code">
        <el-input v-model="ruleForm.code" maxlength="32" class="input" />
      </el-form-item>
      <el-form-item label="业务名称" prop="name">
        <el-input v-model="ruleForm.name" maxlength="32" class="input" />
      </el-form-item>
    </el-form>
  </div>
</template>

<script name="ruleInfoForm">
import { reactive, ref } from 'vue'
import { validateAddBusinessCode } from '@/util/validate'

export default {
  setup() {
    const ruleFormRef = ref()
    const ruleForm = reactive({
      type: '短训',
      code: '',
      name: ''
    })
    const rules = reactive({
      code: [
        { required: true, message: '请输入业务编码', trigger: 'change' },
        { validator: validateAddBusinessCode, trigger: 'change', required: true }
      ],
      name: [
        { required: true, message: '请输入业务名称', trigger: 'change' },
        { validator: validateAddBusinessCode, trigger: 'change', required: true }
      ]
    })
    return {
      ruleFormRef,
      ruleForm,
      rules
    }
  }
}
</script>
<style scoped lang="scss">
  .input {
    width: 300px;
  }
</style>

